<template>
	<label class="upload-files">
		<input
			style="display:none"
			type="file"
			ref="file"
			:multiple="limit>1"
			:disabled="disabled"
			:accept="accept"
			@change="handleChange"
			v-bind="$attrs"
		>
		<slot></slot>
	</label>
</template>

<script>
	/**
	 *  this.$emit('error', '')  文件校验错误
	 *  this.$emit('submit', files)  文件列表
	 */
  const KB = 1024
  export default {
    name: 'upload-files',
    components: {},
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      accept: {
        type: String,
        default: ''
      },
      // 文件个数
      limit: {
        type: Number,
        default: 1
      },
      // 文件大小限制
      size: {
        type: Number,
        default: 500
      },
      // 文件后缀名限制 例： ['jpg','jpeg','xls']
      fileTypes: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        files: []
      }
    },
    methods: {
      // 组件调用
      chooseFiles() {
        this.$refs.file.click()
      },
      handleChange() {
        const { files } = this.$refs.file
        if (files.length > this.limit) {
          this.$emit('error', 'limit')
          return
        }
        this.files = files
        this.handleSubmit()
      },
      checkType(file) {
        if (!file.type) return false
        const suffix = file.name.split('.').pop()
        file.suffix = suffix
        // if (!this.fileTypes.length) return true
        return !this.fileTypes.length || this.fileTypes.includes(suffix)
      },
      checkSize(file) {
        if (isNaN(this.size) || this.size < 0) return true
        return file.size < this.size * KB
      },
      checkFiles(files, methods) {
        for (let i = 0; i < files.length; i += 1) {
          if (!methods(files[i])) return false
        }
        return true
      },
      handleSubmit() {
        const { files } = this
        if (!this.checkFiles(files, this.checkType)) {
          this.$emit('error', 'type')
          return
        }
        if (!this.checkFiles(files, this.checkSize)) {
          this.$emit('error', 'size')
          return
        }
        // let result = this.files.map()
        this.$emit('submit', this.files)
        // const isLt2M = file.size / 1024 / 1024 < 2 //大小小于2M
        // let fe = new FormData()
        // fe.append('file', file) //传文件
        // if (
        // 	['image/jpg', 'image/png', 'image/jpeg', 'image/gif'].indexOf(
        // 		file.type
        // 	) == -1
        // ) {
        // 	Message({
        // 		type: 'warning',
        // 		message: '请选择图片文件!'
        // 	})
        // } else if (!isLt2M) {
        // 	Message({
        // 		type: 'warning',
        // 		message: '大小不能超过2M!'
        // 	})
        // } else {
        // 	uploadFile(fe).then(res => {
        // 		if (res.data) {
        // 			console.log(res.data)
        // 			this.$emit('getUrl', res.data)
        // 			// Message({
        // 			//   type: 'success',
        // 			//   message: '上传成功！'
        // 			// })
        // 		}
        // 	})
        // }
      }
    }
  }
</script>
<style lang="scss" scoped>
	.upload-files {
		display: inline-block;
	}
</style>
